<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<%@include file="/views/common/include/taglib.jsp"%>
<%@include file="/views/common/include/head.jsp"%>
<link rel="stylesheet" href="${ctx}/css/page/header2.css" type="text/css">
<link rel="stylesheet" href="${ctx}/css/page/reset.css" type="text/css">
<link rel="stylesheet" href="${ctx}/css/page/shangpind.css" type="text/css">
<link rel="stylesheet" href="${ctx}/css/page/shangchennav.css" type="text/css"> 
<link rel="stylesheet" href="${ctx}/css/page/footer.css" type="text/css">
<link rel="stylesheet" href="${ctx}/css/page/slick.css" type="text/css">
<%-- <link rel="stylesheet" href="${ctx}/css/page/slick-theme.css" type="text/css"> --%>
<script src="${ctx}/js/controllers/mall/mall_goods_detail.js" type="text/javascript"></script>

<%-- <script src="${ctx}/js/slide/slick.js"></script> --%>
<style type="text/css">
.amount a {
    display: inline-block;
    height: 25px;
    width: 25px;
    background: #EEEEEE;
    border: 1px solid #ccc;
    line-height: 25px;
    text-align: center;
    float: left;
    color: #000;
}
.stock-num {
    height: 23px;
    width: 45px;
    border: 1px solid #ccc;
    line-height: 25px;
    text-align: center;
    float: left;
    border-left: none;
    border-right: none;
}

.amount a {
    display: inline-block;
    height: 25px;
    width: 25px;
    background: #EEEEEE;
    border: 1px solid #ccc;
    line-height: 25px;
    text-align: center;
    float: left;
    color: #000;
}

.specBtn{
    width: 50px;
    background: white;
    border: 1px solid black;
    background-color: white;
    height: 30px;
    margin-left: 10px;"
}
.specBtnSec{
    border: 1px solid red;
}


.slick-prev,
.slick-next
{
    font-size: 0;
    line-height: 0;

    position: absolute;
    top: 50%;

    display: block;

    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);

    cursor: pointer;

    /* color: transparent; */
    border: none;
    outline: none;
    /* background: transparent; */
    
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
    color: transparent;
    outline: none;
    background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
    opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
    opacity: .25;
}

.slick-prev:before,
.slick-next:before
{
    font-family: 'slick';
    font-size: 0px;
    color: red;
   /*  line-height: 1;

    opacity: .75;
    color: white;
 */
    /* -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; */
}

.small-pic .slick-prev
{
    left: -18px;
    background: url(/proprietor/images/mall/shop/zuo.png);
    width: 10px;
    height: 19px;
}
.small-pic .slick-next{
	right: -13px;
	background: url(/proprietor/images/mall/shop/you.png);
    width: 10px;
    height: 19px;
}
[dir='rtl'] .slick-prev
{
    right: -25px;
    left: auto;
}
.slick-prev:before
{
    content: '←';
}
[dir='rtl'] .slick-prev:before
{
    content: '→';
}

.slick-next
{
    right: -18px;
}
[dir='rtl'] .slick-next
{
    right: auto;
    left: -25px;
}
.slick-next:before
{
    content: '→';
}
[dir='rtl'] .slick-next:before
{
    content: '←';
}

.searchhh {
    height: 34px;
    line-height: 30px;
    width: 60px;
    border: 1px solid #005E84;
}
</style>
<script type="text/javascript">
function changeAttr(target){
	
}
var ctx = '${ctx}';
setCtx(ctx);


</script>
</head>
<body>
	 <jsp:include page="/views/common/head_main.jsp" />

	<div class="bg">
	<input type="hidden" id="item" value="${sessionScope.item_mall}"/>
		<div class="contentbox1 contentbox">
			<div class="nav">
				 <ul>
                    <li><a href="${ctx}/main?item=4">商城首页</a></li><span>|</span>
                    <li><a href="${ctx}/mallSeckill">秒杀专区</a></li><span>|</span>
                    <li><a href="${ctx}/main?item=4#article">精品推荐</a></li><span>|</span>
                    <li><a href="${ctx}/main?item=4#hotshop">热门商铺</a></li><span>|</span>
                    <li><a href="${ctx}/mallIntegral">积分专区</a></li>
                </ul>
				<div class="seabox">
					<select class="searchhh" id="selectType">
					<option value="1">商品</option>
					<option value="2">店铺</option>
					</select>
					<input class="search" type="text" id="name"></input><button class="searchbtn" onclick="searchGoodsOrShops()">搜索</button>
				</div>
				<div class="cartbox">
                	 <img src="${ctx}/images/mall/cart.png">&nbsp;&nbsp;&nbsp;<a href="${ctx}/shopcart/shopcartList" target="_blank">我的购物车</a>
                </div>
			</div>
		</div>
		<div class="contentbox2 contentbox">
		<input type="hidden" id="goodsId" value="${goodsInfo.id}"/>
		<input type="hidden" id="shopId" value="${goodsInfo.shopId}"/>
		<input type="hidden" id="goodsName" value="${goodsInfo.name}"/>
		<input type="hidden" id="goodsLogo" value="${goodsInfo.logo}"/>
		<input type="hidden" id="marketPrice" value="${goodsInfo.marketPrice}"/>
        <input type="hidden" id="goodsSpecId" value="${goodsInfo.specificationId}"/>
		<c:if test="${type == 2}"><input type="hidden" id="price" value="${goodsInfo.integralNum}"/></c:if>
		<c:if test="${type !=2}"><input type="hidden" id="price" value="${goodsInfo.price}"/></c:if>
		<input type="hidden" id="type" value="${goodsInfo.type}"/>
		
		<c:if test="${type==2}">
			<div class="item-wrap" style="height:450px;">
				<div class="item-info"  style="height:450px;">
					<div class="item-location">
						<span>商城</span><span> / </span><span>积分专区</span>
					</div>
					<div class="item-info-l" >
						<div class="gallery">
							<div class="main-pic">
								<a href="#"><img style="height:100%;width:100%;" src="${sessionScope.image_logo}${goodsInfo.logo}" /></a>
							</div>
							<ul class="small-pic">
								<c:forEach items="${goodsImgList}" var="item" varStatus="status">
									<li><a href="#"><img style="height:50px;width:50px;" src="${sessionScope.image_logo}${item.url}" /></a></li>
								</c:forEach>
							</ul>
						</div>
					</div>
					<div class="item-info-r">
						<div class="padd">
							<p class="item-title">
								${goodsInfo.name}
							</p>
							<div class="item-price">
							<input type="hidden" id="userIntegral" value="${user.integral}"/>
							<input type="hidden" id="needIntegral" value="${goodsInfo.integralNum}"/>
							换购价：<span class="price-color">￥${goodsInfo.integralNum}积分</span>&nbsp;&nbsp;&nbsp; 库存: ${goodsInfo.stock} ${goodsInfo.unit}
							</div>
							<c:if test="${goodsInfo.stock != 0}">
							<div class="item-tips" style="margin-bottom: 20px;">
								<c:forEach items="${attrvoList}" var="item" varStatus="status">
								<p>选择${item.attrName}:
								<c:forEach items="${item.attrValues}" var="attrVo" varStatus="status">
                                    <button <c:if test="${attrVo.isSelected == true}">class="specBtn specBtnSec"</c:if>
                                            <c:if test="${attrVo.isSelected == false}">class="specBtn"</c:if> 
                                        id="${attrVo.attrValue}_${attrVo.isSelected}">${attrVo.attrValue}</button>
                                </c:forEach>
								</p>
								</c:forEach>
							</div>
							<div class="item-tips" style="margin-bottom: 20px;">
								<p style="color: red;">温馨提示：</p>
								<p>1. 支持2小时送达</p>
								<p>2. 在线支付订单需在2小时内支付，否则订单将被取消</p>
							</div>
							<div class="buy-stock">
								<div class="stock-box" style="width:150px;">
									<div class="text-num">数量：</div>
										<div class="amount">
											<a class="decrement" id="${goodsInfo.id}_0" href="javascript:void(0);">-</a> 
											<input class="stock-num" id="count" value="1"/> 
											<a class="increment" id="${goodsInfo.id}_1" href="javascript:void(0);">+</a>
										</div>
								</div>
								<div class="buybox">
									<div class="buy action"><a class="link-buy" onclick="duiHuan()" style="cursor: pointer;">立即兑换</a></div>
								</div>
							</div>
							</c:if>
						</div>
					</div>
				</div>
				<div class="ad" style="height:450px;">
				<c:if test="${shopInfo != null}">
					<div class="padd">
						<div class="ad-logo">
							<c:if test="${ not empty shopInfo.logo}">
							<div><img class="first big" width="100%" height="100%" src="${sessionScope.image_logo}${shopInfo.logo}"/></div>
							</c:if>
							<c:if test="${ empty shopInfo.logo}">
								<div><img class="first big" width="100%" height="100%" src="${ctx}/images/mall/default_shop.jpg"/></div>
							</c:if>
						</div>
						<p><span class="font-w">${shopInfo.name}</span>&nbsp;<span class="shop-type">自营</span></p>
						<p><span class="font-w">电话：</span>${shopInfo.phone}</p>
						<p><span class="font-w">地址：</span><span class="address">${shopInfo.address}</span></p>
						<a href="${ctx}/shopIndex?pNo=1&shopId=${shopInfo.id}&shopName=${name}" target="_blank">
						<button class="enter-shop" style="cursor: pointer;">进店逛逛</button>
						</a>
					</div>
				</c:if>
				</div>
			</div>
			</c:if>
			<c:if test="${type==3 }">
			<div class="item-wrap" style="height:450px;">
				<div class="item-info"  style="height:450px;">
					<div class="item-location">
						<span>商城</span><span> / </span><span>秒杀专区</span>
					</div>
					<div class="item-info-l" >
						<div class="gallery">
							<div class="main-pic">
								<a href=""><img style="height:100%;width:100%;" src="${sessionScope.image_logo}${goodsInfo.logo}" /></a>
							</div>
							<ul class="small-pic">
								<c:forEach items="${goodsImgList}" var="item" varStatus="status">
									<li><a href=""><img style="height:50px;width:50px;" src="${sessionScope.image_logo}${item.url}" /></a></li>
								</c:forEach>
							</ul>
						</div>
					</div>
					<div class="item-info-r">
						<div class="padd">
							<p class="item-title">
								${goodsInfo.name}
							</p>
							<div class="item-price">
							秒杀价：<span class="price-color">￥${goodsInfo.price}</span>&nbsp;&nbsp;&nbsp; 库存: ${goodsInfo.stock} ${goodsInfo.unit}
							</div>
							<c:if test="${goodsInfo.stock != 0}">
							<div class="item-tips" style="margin-bottom: 20px;">
								<c:forEach items="${attrvoList}" var="item" varStatus="status">
								<p>选择${item.attrName}:
                                <c:forEach items="${item.attrValues}" var="attrVo" varStatus="status">
                                    <button <c:if test="${attrVo.isSelected == true}">class="specBtn specBtnSec"</c:if>
                                            <c:if test="${attrVo.isSelected == false}">class="specBtn"</c:if> 
                                        id="${attrVo.attrValue}_${attrVo.isSelected}">${attrVo.attrValue}</button>
                                </c:forEach>
								</p>
								</c:forEach>
							</div>
							<div class="item-tips" style="margin-bottom: 20px;">
								<p style="color: red;">温馨提示：</p>
								<p>1. 支持2小时送达</p>
								<p>2. 在线支付订单需在2小时内支付，否则订单将被取消</p>
							</div>
							<div class="buy-stock">
								<div class="stock-box" style="width:150px;">
									<div class="text-num">数量：</div>
										<div class="amount">
											<a class="decrement" id="${goodsInfo.id}_0" href="javascript:void(0);">-</a> 
											<input class="stock-num" id="count" value="1"/> 
											<a class="increment" id="${goodsInfo.id}_1" href="javascript:void(0);">+</a>
										</div>
								</div>
								<div class="buybox">
									<div class="buy action"><a class="link-buy" onclick="duiHuan()" style="cursor: pointer;">立即购买</a></div>
								</div>
								<%-- <div style="border: none;text-align: center;width:130px;float:left;margin-left:10px;background: #89C9D5;color:#fff;height: 32px;line-height: 32px;"> 
									<span><img style="vertical-align: -3px;" src="${ctx}/images/mall/shop/cartWhite.png"></span> 
									<span onclick="addToCart('${goodsInfo.id}','${goodsInfo.shopId}','${goodsInfo.name}','${goodsInfo.logo}','${goodsInfo.price}','${goodsInfo.type}','1')" style="cursor: pointer;">加入购物车</span> 
                                </div>  
                                <div style="width:32px;float:left;margin-left:10px;height: 32px;line-height: 32px;"> 
									<span style="cursor: pointer;" onclick="addMyFavorite('', ${goodsInfo.id});"><img style="height:100%;width:100%;" src="${ctx}/images/mall/shop/shoucang.png"></span> 
                                </div> --%>
							</div>
							</c:if>
						</div>
					</div>
				</div>
				<div class="ad" style="height:450px;">
				<c:if test="${shopInfo != null}">
					<div class="padd">
						<div class="ad-logo">
							<c:if test="${ not empty shopInfo.logo}">
							<div><img  width="100%" height="100%" src="${sessionScope.image_logo}${shopInfo.logo}"/></div>
							</c:if>
							<c:if test="${ empty shopInfo.logo}">
								<div><img width="100%" height="100%" src="${ctx}/images/mall/default_shop.jpg"/></div>
							</c:if>
						</div>
						<p><span class="font-w">${shopInfo.name}</span>&nbsp;<span class="shop-type">自营</span></p>
						<p><span class="font-w">电话：</span>${shopInfo.phone}</p>
						<p><span class="font-w">地址：</span><span class="address">${shopInfo.address}</span></p>
						<a href="${ctx}/shopIndex?pNo=1&shopId=${shopInfo.id}&shopName=${name}" target="_blank">
						<button class="enter-shop" style="cursor: pointer;">进店逛逛</button>
						</a>
					</div>
				</c:if>
				</div>
			</div>
			</c:if>
			<c:if test="${type==1}">
			<div class="item-wrap" style="height:450px;">
				<div class="item-info" style="height:450px;" >
					<div class="item-location">
						<span>商城</span><span> / </span><span>商品专区</span>
					</div>
					<div class="item-info-l" >
						<div class="gallery">
							<div class="main-pic">
								<a href=""><img style="height:100%;width:100%;" src="${sessionScope.image_logo}${goodsInfo.logo}" /></a>
							</div>
							<ul class="small-pic">
								<c:forEach items="${goodsImgList}" var="item" varStatus="status">
									<li><a href=""><img style="height:50px;width:50px;" src="${sessionScope.image_logo}${item.url}" /></a></li>
								</c:forEach>
							</ul>
						</div>
					</div>
					<div class="item-info-r">
						<div class="padd">
							<p class="item-title">
								${goodsInfo.name}
							</p>
							<div class="item-price">
							价格：<span class="price-color">￥${goodsInfo.price}</span>&nbsp;&nbsp;&nbsp; 库存: ${goodsInfo.stock} ${goodsInfo.unit}
							</div>
							<%-- <c:if test="${goodsInfo.stock != 0}"> --%>
							<div class="item-tips" style="margin-bottom: 20px;">
								<c:forEach items="${attrvoList}" var="item" varStatus="status">
								<p>选择${item.attrName}:
								<c:forEach items="${item.attrValues}" var="attrVo" varStatus="status">
								    <button <c:if test="${attrVo.isSelected == true}">class="specBtn specBtnSec"</c:if>
                                            <c:if test="${attrVo.isSelected == false}">class="specBtn"</c:if> 
                                        id="${attrVo.attrValue}_${attrVo.isSelected}">${attrVo.attrValue}</button>
								</c:forEach>
								</p>
								</c:forEach>
							</div>
							<div class="item-tips" style="margin-bottom: 20px;">
								<p style="color: red;">温馨提示：</p>
								<p>1. 支持2小时送达</p>
								<p>2. 在线支付订单需在2小时内支付，否则订单将被取消</p>
							</div>
							<div class="buy-stock">
								<div class="stock-box" style="width:150px;">
									<div class="text-num">数量：</div>
										<div class="amount">
											<a class="decrement" id="${goodsInfo.id}_0" href="javascript:void(0);">-</a> 
											<input class="stock-num" id="count" value="1"/> 
											<a class="increment" id="${goodsInfo.id}_1" href="javascript:void(0);">+</a>
										</div>
								</div>
								<div class="buybox">
									<div class="buy action"><a class="link-buy" onclick="duiHuan()" style="cursor: pointer;">立即购买</a></div>
								</div>
								<div style="border: none;text-align: center;width:130px;float:left;margin-left:10px;background: #89C9D5;color:#fff;height: 32px;line-height: 32px;"> 
									<span><img style="vertical-align: -3px;" src="${ctx}/images/mall/shop/cartWhite.png"></span> 
									<span onclick="addToCart('${goodsInfo.id}','${goodsInfo.shopId}','${goodsInfo.name}','${goodsInfo.logo}','${goodsInfo.price}','${goodsInfo.type}','1')" style="cursor: pointer;">加入购物车</span> 
                                </div> 
                                <div style="width:32px;float:left;margin-left:10px;height: 32px;line-height: 32px;"> 
									<span style="cursor: pointer;" onclick="addMyFavorite('', ${goodsInfo.id});"><img style="height:100%;width:100%;" src="${ctx}/images/mall/shop/shoucang.png"></span> 
                                </div> 
							</div>
							<%-- </c:if> --%>
						</div>
					</div>
				</div>
				<div class="ad" style="height:450px;">
				<c:if test="${shopInfo != null}">
					<div class="padd">
						<div class="ad-logo">
							<c:if test="${ not empty shopInfo.logo}">
							<div><img  width="100%" height="100%" src="${sessionScope.image_logo}${shopInfo.logo}"/></div>
							</c:if>
							<c:if test="${ empty shopInfo.logo}">
								<div><img width="100%" height="100%" src="${ctx}/images/mall/default_shop.jpg"/></div>
							</c:if>
						</div>
						<p><span class="font-w">${shopInfo.name}</span>&nbsp;<span class="shop-type">自营</span></p>
						<p><span class="font-w">电话：</span>${shopInfo.phone}</p>
						<p><span class="font-w">地址：</span><span class="address">${shopInfo.address}</span></p>
						<a href="${ctx}/shopIndex?pNo=1&shopId=${shopInfo.id}&shopName=${name}" target="_blank">
						<button class="enter-shop" style="cursor: pointer;">进店逛逛</button>
						</a>
					</div>
				</c:if>
				</div>
			</div>
			</c:if>
		</div>
		<div class="contentbox3 contentbox">
			<div class="item-d-r" style="width:1200px;margin-left: 0;">
				<div class="wrap-bar" style="background:#89C9D5; ">
					<ul>
						<li class="selected" ><a   style="display: inline-block;width: 100%;height: 100%;">商品详情</a></li>
						<li><a >规格参数</a></li>
						<li><a >商品评价<span></span></a></li>
					</ul>
				</div>
				<div>
				<div class="wrap-details" >
					<div class="item-attribute">
						<div class="padd" style="padding:45px;">
							<ul>
								<li>商品名称：${goodsInfo.name}</li>
                                <li>单位：${goodsInfo.unit}</li>
							</ul>
						</div>
					</div>
					<div class="item-description">
							<div class="pic-wrap" style="margin:0 200px;">
								${goodsInfo.detail}
							</div>
					</div>
				</div>
				<div class="wrap-details" style="display:none;">
					<div class="item-attribute">
						<div class="padd" style="padding:45px;">
							<ul>
                                <c:forEach items="${attrvoList}" var="item" varStatus="status">
                                <li>${item.attrName}:
                                    <c:forEach items="${item.attrValues}" var="attrVo" varStatus="status">
                                        <c:if test="${attrVo.isSelected == true}">${attrVo.attrValue}</c:if>
                                    </c:forEach>
                                </li>
                                </c:forEach>
							</ul>
						</div>
					</div>
				</div>
				<div class="wrap-details" style="display:none;">
					<div class="item-attribute">
						<div class="padd" style="padding:45px;">
						</div>
					</div>
				</div>
			</div>
			</div>
		</div>
	</div>
	<jsp:include page="/views/common/footer.jsp" />
	<script src="${ctx}/js/slide/jquery-1.9.1.min.js"></script>
	<script src="${ctx}/js/slide/slick.min.js"></script>
	</body>

</html>